<template>
  <div class="resource">
    <el-card>
      <!-- class="project-list-container" -->
      <div>
        <div class="list-h">
          <el-button
            type="primary"
            @click="handleAdd"
            class="add-option"
            v-auth="`/system/resource--add`"
            >添加页面</el-button
          >
          <!-- <el-form
            :inline="true"
            class="demo-form-inline"
            :model="formInline"
            ref="formRef"
          >
            <el-form-item label="资源名称" prop="menuName">
              <el-input
                v-model.trim="formInline.menuName"
                clearable
                class="width-custom120"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="handleReset">重置</el-button>
              <el-button type="primary" @click="handleSearch">查询</el-button>
            </el-form-item>
          </el-form> -->
        </div>
        <el-skeleton style="height: 50vh" :rows="8" :loading="loading" animated>
          <el-table
            :data="tableData"
            v-loading="loading"
            style="width: 100%; margin: 20px 0"
            row-key="id"
            border
            :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          >
            <template #empty>
              <el-empty :image-size="150" description="暂无数据"></el-empty>
            </template>
            <el-table-column type="expand">
              <template #default="{ row }">
                <div class="expand_wrap">
                  <el-table :data="row.resourceList" border>
                    <el-table-column
                      prop="resourceName"
                      label="资源名称"
                    ></el-table-column>
                    <el-table-column
                      prop="resourceKey"
                      label="标识编号"
                    ></el-table-column>
                    <el-table-column
                      prop="interfaceKey"
                      label="接口标识"
                    ></el-table-column>
                    <el-table-column prop="interfaceKey" label="资源类型">
                      <template #default="{ row }">
                        {{ formatterStatusType(row) }}
                      </template>
                    </el-table-column>

                    <el-table-column label="操作" width="160" fixed="right">
                      <template #default="{ row }">
                        <el-button
                          type="text"
                          @click="handleEditChild(row)"
                          v-auth="`/system/resource--childedit`"
                          >编辑</el-button
                        >
                        <el-popconfirm
                          confirm-button-text="确定"
                          cancel-button-text="取消"
                          icon="el-icon-info"
                          icon-color="red"
                          title="确定删除该条记录吗？"
                          @confirm="handleDeleteChild(row)"
                        >
                          <template #reference>
                            <el-button
                              type="text"
                              v-auth="`/system/resource--childdelete`"
                              >删除</el-button
                            >
                          </template>
                        </el-popconfirm>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </template>
            </el-table-column>

            <el-table-column
              prop="resourceGroupKey"
              label="资源路径"
              width="180"
            >
            </el-table-column>
            <el-table-column
              prop="resourceGroupName"
              label="页面名称"
              width="180"
            >
            </el-table-column>
            <el-table-column prop="resourceGroupDesc" label="资源描述">
            </el-table-column>
            <!-- <el-table-column prop="projectResourceType" label="资源类型">
              <template #default="{ row }">
                {{ formatterResourceTypeMap(row) }}
              </template>
            </el-table-column> -->
            <el-table-column label="操作" width="160" fixed="right">
              <template #default="{ row }">
                <!-- 根据是否是根页面进行显示 -->
                <!-- v-if="row.isLeaf === '0'" -->
                <el-button
                  type="text"
                  @click="handleAddpage(row)"
                  v-auth="`/system/resource--parentadd`"
                  >添加资源</el-button
                >
                <el-button
                  type="text"
                  @click="handleEditParent(row)"
                  v-auth="`/system/resource--parentedit`"
                  >编辑</el-button
                >
                <el-popconfirm
                  confirm-button-text="确定"
                  cancel-button-text="取消"
                  icon="el-icon-info"
                  icon-color="red"
                  title="确定删除该条记录吗？"
                  @confirm="handleDeleteParent(row)"
                >
                  <template #reference>
                    <el-button
                      type="text"
                      v-auth="`/system/resource--parentdelete`"
                      >删除</el-button
                    >
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </el-skeleton>
      </div>
    </el-card>

    <el-drawer
      size="50%"
      v-model="drawer"
      :before-close="handleClose"
      destroy-on-close
      custom-class="demo-drawer"
    >
      <template #title>
        <div class="demo-drawer__header">
          {{ mode === "edit" ? "编辑资源" : "添加资源" }}
        </div>
      </template>
      <div class="demo-drawer__content">
        <resource-set
          v-if="drawer"
          @emitClose="emitClose"
          :mode="mode"
          :parentData="parentData"
        />
      </div>
    </el-drawer>
    <el-dialog
      :title="btnmode === 'add' ? '新增按钮' : '编辑按钮'"
      v-model="dialogVisible"
      destroy-on-close
      width="600px"
    >
      <!-- :before-close="resetGetData" -->
      <!-- :nodeId="nodeId" -->
      <resource-dialog
        v-model:dialogVisible="dialogVisible"
        :childData="childData"
        :btnmode="btnmode"
        :resource-id="resourceId"
        :resource-key="resourceKey"
        @resetGetData="resetGetData"
      />
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { reactive, toRefs, ref, defineComponent } from "vue";
import NotifMessage from "/@/utils/message/notification";
import {
  postResourceGroupList,
  postDeleteResource,
  postDeleteResSingle
} from "/@/api/resource";
import ResourceSet from "./components/ResourceSet.vue";
import ResourceDialog from "./components/ResourceDialog.vue";

export default defineComponent({
  name: "ResourceList",
  components: {
    ResourceSet,
    ResourceDialog
  },

  setup() {
    const flowTypeMap = new Map([
      ["1", "URL"],
      ["2", "菜单"],
      ["3", "组件"],
      ["4", "接口"]
    ]);
    // const resourceTypeMap = new Map([
    //   ["A", "A类项目"],
    //   ["B", "B类项目"],
    //   ["S", "A类项目标段"]
    // ]);
    // const formRef = ref<HTMLFormElement | null>(null) as any;
    const loading = ref<boolean>(false);
    // const formInline = reactive({
    //   menuName: ""
    // });
    const mode = ref("add");
    const btnmode = ref("add");
    const drawer = ref<boolean>(false);
    const dialogVisible = ref<boolean>(false);
    let resourceInfo = reactive({
      resourceId: null,
      resourceKey: ""
    });
    const state = reactive({
      tableData: [],
      childData: {},
      parentData: {}
    });

    // 请求表格数据
    async function getTableData(obj: object = {}) {
      loading.value = true;
      try {
        const { code, data } = await postResourceGroupList(obj);
        if (code === 200) {
          state.tableData = data;
        }
      } catch (err) {
        console.log(err);
      } finally {
        loading.value = false;
      }
    }

    // 打开添加抽屉
    const handleAdd = () => {
      mode.value = "add";
      drawer.value = true;
    };

    // 添加按钮
    const handleAddpage = row => {
      dialogVisible.value = true;
      btnmode.value = "add";
      resourceInfo.resourceId = row.id;
      resourceInfo.resourceKey = row.resourceGroupKey;
    };

    const handleEditChild = row => {
      dialogVisible.value = true;
      btnmode.value = "edit";
      state.childData = row;
    };

    const handleEditParent = row => {
      drawer.value = true;
      mode.value = "edit";
      state.parentData = row;
    };

    // emit关闭
    const emitClose = () => {
      handleClose();
    };

    // 关闭抽屉弹框
    const handleClose = () => {
      drawer.value = false;
      getTableData();
    };

    // 重新刷新资源列表
    const resetGetData = () => {
      dialogVisible.value = false;
      getTableData();
    };

    // 删除一级资源
    async function handleDeleteParent(item) {
      try {
        const { code, message } = await postDeleteResource({ id: item.id });
        if (code === 200) {
          NotifMessage.success(message);
          getTableData();
        } else {
          NotifMessage.error(message);
        }
      } catch (err) {
        console.log(err);
      }
    }

    // 删除按钮
    async function handleDeleteChild(item) {
      try {
        const { code, message } = await postDeleteResSingle({ id: item.id });
        if (code === 200) {
          NotifMessage.success(message);
          getTableData();
        } else {
          NotifMessage.error(message);
        }
      } catch (err) {
        console.log(err);
      }
    }

    // 重置条件
    // const handleReset = (): void => {
    //   formRef.value.resetFields();
    // };

    // 根据条件进行搜索
    // const handleSearch = (): void => {
    //   getTableData(formInline);
    // };
    const formatterStatusType = row => {
      return flowTypeMap.get(row.resourceType);
    };

    // const formatterResourceTypeMap = row => {
    //   return resourceTypeMap.get(row.projectResourceType);
    // };

    // 请求数据
    getTableData();
    return {
      ...toRefs(state),
      ...toRefs(resourceInfo),
      formatterStatusType,
      mode,
      btnmode,
      drawer,
      dialogVisible,
      // formInline,
      // formRef,
      loading,
      handleAdd,
      handleDeleteParent,
      handleDeleteChild,
      handleAddpage,
      handleClose,
      emitClose,
      resetGetData,
      handleEditChild,
      handleEditParent
      // handleReset,
      // handleSearch
    };
  }
});
</script>
<style lang="scss" scoped>
.resource {
  .wrap_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 10px;
    .el-button {
      width: 100%;
      border: 1px dashed gray;
    }
  }

  .expand_wrap {
    padding: 3px;
  }
  .demo-drawer {
    .demo-drawer__header {
      line-height: 58px;
      padding-left: 15px;
      font-size: 14px;
      font-weight: 600;
      color: #606266;
    }
    .demo-drawer__content {
      height: calc(100vh - 64px);
      width: 100%;
      border-top: 1px solid rgba(0, 21, 41, 0.15);
    }
  }
  :deep .el-drawer__header {
    margin-bottom: 0px;
    padding-top: 0;
  }
  :deep .el-drawer__body {
    padding: 0;
  }
}
</style>
